<template>
	<view class="container">
		<uni-nav-bar fixed="true" color="#ffffff" :border="false" left-icon="back" @clickLeft="back"
			background-color="rgba(0, 0, 0, 0)" :status-bar="true" title="商家超市" />
		<image :src="details.banner" class="main-img" mode="aspectFill"></image>
		<view class="seller-infor">
			<image :src="details.image" mode="aspectFill" class="logo"></image>
			<view class="text">
				<view class="name-wrapper">
					<view class="name ell">{{ details.name || '' }}</view>
					<image src="/static/tel02.png" class="tel" @click="handlePhoneCall(details.phone)"></image>
				</view>
				<view class="txt">
					<image src="/static/wifi.png" class="icon"></image>
					<view class="con ell" @click="toLink">
						<text class="acc ell">账号：{{ details.wifiAccountNo || '' }}</text>
						密码：{{ details.wifiPasssword || '' }}
					</view>
				</view>
				<view class="txt" @click="handleOpenLocation">
					<image src="/static/address.png" class="icon"></image>
					<view class="con ell">
						{{ details.provinceName || '' }}{{ details.cityName || '' }}{{ details.districtName || '' }}{{ details.address || '' }}
					</view>
				</view>
			</view>
		</view>
		<view class="titleTab">
			<view class="title left">全部商品</view>
			<view class="title right">
				<view>
					{{ typeName }}
				</view>
				<view class="timer">
					门店服务时段：{{details.marketDoBussinessTime}}
				</view>
			</view>
		</view>
		<view class="content" :style="{ height: `calc(100vh - ${tabbarBottom * 2}rpx - 650rpx)` }">
			<scroll-view scroll-y="true" class="menu-wrapper"
				:style="{ height: `calc(100vh - ${tabbarBottom * 2}rpx - 650rpx)` }">

				<view class="menu-item" :class="{ on: type.id == catId }" v-for="(type, index) in typeList"
					@click="handleSwitchType(type, index)" :key="type.id">
					<text>{{ type.name }}</text>
				</view>
			</scroll-view>
			<!-- {{JSON.stringify(cartProducts)}} -->
			<!-- @scrolltolower="scrolltolowerF" -->
			<scroll-view scroll-y="true" class="con-wrapper"
				:style="{ height: `calc(100vh - ${tabbarBottom * 2}rpx - 650rpx)` }">

				<view v-for="(productList, i) in list" :key="i">
					<template v-if="i == index">
						<view class="product-item" v-for="product in productList" :key="product.id">
							<image :src="product.image" mode="aspectFill" class="img"
								@click="handleDetails(product.id)"></image>
							<view class="text">
								<view class="name ell">{{ product.name }}</view>
								<view class="specifications ell" v-if="product.normal">{{ product.normal }}</view>
								<view class="bottom-wrapper">
									<view class="price">¥ {{ product.price==0?'免费领取':product.price }}</view>
									<count :product="product" :count.sync="product.num" @onCountChanged="getCart">
									</count>
								</view>
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-menu-wrapper" :style="{ height: tabbarBottom + 49 + 'px' }">
			<bottom-menu ref="bottomMenu" :totalAmount="this.totalAmount" :type="type" :totalNum="this.totalNum"
				:shopId="details.id" :cartProducts="this.cartProducts" @onListItemChanged="onCartItemChanged"
				@clearAll="handleCartDelete" @refList="refList"></bottom-menu>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import count from './count.vue';
	import bottomMenu from './bottom-menu.vue';
	import {
		frontPage,
		selectByType
	} from '@/api/product.js';
	import {
		memberCarItems,
		cartDelete
	} from '@/api/order.js';
	import {
		shopDetail
	} from '@/api/store.js';
	import {
		flat
	} from '@/utils/util.js';

	export default {
		components: {
			uniNavBar,
			count,
			bottomMenu
		},
		data() {
			return {
				tabbarBottom: 0,
				cartProducts: [],
				type: 3, // 1.积分商品 2.特价商品 3.商户超市商品 4.商户服务 5.售货机商品
				typeList: [],
				details: {},
				shopId: '',
				list: [],
				// isLoad: false,
				// loadingFinsh: false,
				// loadingShow: false,
				// totalCount: 0,
				pageNum: 1,
				pageSize: 100,
				catId: '',
				typeName: '',
				totalNum:0,
				totalAmount:0,
				
				index: 0
			};
		},
		computed: {
			// checkedProducts: {
			// 	get() {
			// 		let checkedProduct = [...this.cartProducts];
			// 		let initProductIds = checkedProduct.map(e => e.productId);
			// 		const list = flat(this.list);
			// 		for (let j = 0; j < list.length; j++) {
			// 			let currentIndex = initProductIds.indexOf(list[j].id);
			// 			if (list[j].num > 0) {
			// 				if (currentIndex != -1) {
			// 					checkedProduct[currentIndex].num = list[j].num;
			// 				} else {
			// 					checkedProduct.push(list[j]);
			// 				}
			// 			} else {
			// 				if (currentIndex != -1) {
			// 					checkedProduct[currentIndex].num = list[j].num;
			// 				}
			// 			}
			// 		}
			// 		return checkedProduct;
			// 	},
			// 	set(val) {
			// 		return val;
			// 	}
			// },
			// totalNum: {
			// 	get() {
			// 		let count = 0;
			// 		for (let j = 0; j < this.checkedProducts.length; j++) {
			// 			count += this.checkedProducts[j].num;
			// 		}
			// 		return count;
			// 	},
			// 	set(val) {
			// 		return val;
			// 	}
			// },
			// totalAmount: {
			// 	get() {
			// 		let totalAmount = 0;
			// 		for (let j = 0; j < this.checkedProducts.length; j++) {
			// 			totalAmount += Number(this.checkedProducts[j].num * this.checkedProducts[j].price);
			// 		}
			// 		return totalAmount.toFixed(2);
			// 	},
			// 	set(val) {
			// 		return val;
			// 	}
			// }
		},
		onLoad(option) {
			if (option.shopId) {
				this.shopId = option.shopId;

			}
		},
		onShow() {
			this.getDetails();
		},
		mounted() {
			const fixSize = () => {
				const {
					safeAreaInsets,
					platform
				} = uni.getSystemInfoSync();

				let barpx = 0;
				if (safeAreaInsets && safeAreaInsets.bottom) {
					if (safeAreaInsets.bottom > 0) {
						barpx = safeAreaInsets.bottom;
					} else {
						barpx = 0;
					}
				}
				if (platform == 'devtools') {
					this.tabbarBottom = barpx || 6;
				} else if (platform == 'ios') {
					this.tabbarBottom = barpx || 6;
				} else if (platform == 'android') {
					this.tabbarBottom = barpx || 10;
				}
			};

			fixSize();
		},
		methods: {
			toLink() {
				uni.navigateTo({
					url: `/pages/store/wifi?details=${encodeURIComponent(JSON.stringify(this.details))}&shopId=${this.details.id}`
				})
			},
			refList() {},
			handleOpenLocation() {
				const that = this;
				const {
					latitude,
					longitude,
					name,
					cityName,
					districtName,
					address
				} = that.details;
				let lng = that.convert2TecentMap(longitude, latitude).lng
				let lat = that.convert2TecentMap(longitude, latitude).lat
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					name,
					address: cityName + districtName + address
				});
			},
			convert2TecentMap(lng, lat) {
				if (lng == '' && lat == '') {
					return {
						lng: '',
						lat: ''
					}
				}
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0
				var x = lng - 0.0065
				var y = lat - 0.006
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
				var qqlng = z * Math.cos(theta)
				var qqlat = z * Math.sin(theta)
				return {
					lng: qqlng,
					lat: qqlat
				}
			},
			getDetails() {
				const data = {
					shopId: this.shopId
				};
				shopDetail(data).then(respanse => {
					this.details = respanse.result;
					this.getCart();
				});
			},
			getCart() {
				const data = {
					shopId: this.details.id,
					type: this.type
				};
				memberCarItems(data).then(respanse => {
					if (respanse.result.length) {
						this.cartProducts = respanse.result[0].details;
					} else {
						this.cartProducts = []
						this.list.forEach(products => {
							products.forEach(item => {
								item.num = 0;
							});
						});
					}

					this.getCartData();
					if (this.typeList.length == 0) {
						this.getTypeList();
					}
					
					
				});
			},


			getCartData(){
				let count = 0;
				let amount = 0;
				for (let j = 0; j < this.cartProducts.length; j++) {
					count += this.cartProducts[j].num;
					amount += Number(this.cartProducts[j].num * this.cartProducts[j].price);
					
				}
				
				this.totalNum = count;
				this.totalAmount = amount.toFixed(2);
				
			//	this.getList();

				this.$refs.bottomMenu.updateData(this.totalNum,this.totalAmount,this.cartProducts)
		
			},
			getTypeList() {
				const data = {
					type: this.type,
					shopId: this.details.id
				};
				selectByType(data).then(respanse => {
					this.typeList = respanse.result;
					if (respanse.result.length > 0) {
						this.catId = respanse.result[0].id;
						this.typeName = respanse.result[0].name;
						this.index = 0;
						this.getList();
					}
				});
			},

			getList() {
				const data = {
					catId: this.catId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.type,
					shopId: this.details.id
				};
				frontPage(data).then(respanse => {
					const {
						rows,
						total
					} = respanse.result;
					if (rows) {
						rows.forEach(product => {
							this.$set(product, 'num', 0);
							this.$set(product, 'timer', null);
							this.cartProducts.forEach(cartProduct => {
								if (product.id == cartProduct.productId) {
									product.num = cartProduct.num;
								}
							});
						});
				
						this.$set(this.list, this.index, rows);
					} else {
						this.$set(this.list, this.index, []);
					}
					// this.totalCount = total
					// this.isLoad = true
					// this.loadingShow = false
				});
			},

			//  切换分类
			handleSwitchType(item, index) {
				this.catId = item.id;
				this.typeName = item.name;
				this.index = index;
				// this.list = []
				// this.isLoad = false
				// this.loadingFinsh = false
				// this.loadingShow = false
				// this.totalCount = 0
				if (!this.list[index]) {
					this.pageNum = 1;
					this.getList();
				}
			},

			// 滚动到底部
			scrolltolowerF() {
				this.pageNum = this.pageNum + 1;
				this.getList();
			},

			handlePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},

			handleDetails(id) {
				uni.navigateTo({
					url: `/pages/product-details/index?productId=${id}&shopId=${this.details.id}`
				});
			},

			back() {
				uni.navigateBack();
			},
			onCartItemChanged({
				value,
				id
			}) {
				this.getCart()
			},

			//  清除购物车
			handleCartDelete() {
				
				if(this.cartProducts.length==0){
				
					return ;
				}
				const that = this;
				uni.showModal({
					title: '提示',
					content: `确定清空所有商品吗？`,
					success: function(res) {
						if (res.confirm) {
							const cartIds = that.cartProducts
								.map(item => {
									return item.id;
								})
								.join(',');
							cartDelete({
								ids: cartIds
							}).then(respanse => {
								that.cartProducts = [];
								that.list.forEach(products => {
									products.forEach(item => {
										item.num = 0;
									});
								});
								that.$refs.bottomMenu.isPopupShow = false;
								that.getCart();
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>
<style>
	body {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-navbar__placeholder {
		display: none !important;
	}

	.main-img {
		display: block;
		width: 100%;
		height: 335rpx;
	}

	.titleTab {
		display: flex;
		justify-content: space-between;

		.title {
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			display: flex;
			text-align: center;
			line-height: 38rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #060606;
		}

		.left {
			width: 149rpx;
		}

		.right {
			width: calc(100% - 149rpx);
			display: flex;
			padding: 20rpx 0 20rpx 40rpx;
			justify-content: space-between;
			align-items: center;

			.timer {
				font-size: 20rpx;
				font-weight: normal;
				margin-right: 30rpx;
			}
		}

	}

	.seller-infor {
		display: flex;
		margin: -104rpx 48rpx 0;
		padding: 33rpx 28rpx 35rpx 46rpx;
		background-color: #fff;
		box-shadow: 1px 5rpx 9rpx 0px rgba(196, 197, 197, 0.3);
		border-radius: 8rpx;

		.logo {
			width: 132rpx;
			height: 132rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
		}

		.text {
			flex: 1;
			padding-top: 3rpx;
			margin-left: 22rpx;
			overflow: hidden;

			.name-wrapper {
				display: flex;

				.name {
					flex: 1;
					max-width: 360rpx;
					line-height: 40rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #060606;
				}

				.tel {
					padding: 5rpx 5rpx 5rpx 15rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.txt {
				display: flex;
				margin-top: 11rpx;

				.icon {
					margin-right: 6rpx;
					width: 34rpx;
					height: 34rpx;
				}

				.con {
					flex: 1;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #666666;

					.acc {
						display: inline-block;
						vertical-align: middle;
						width: 50%;
					}
				}
			}
		}
	}

	.content {
		display: flex;
		margin-top: 20rpx;
		height: calc(100vh - 588rpx);

		.menu-wrapper {
			width: 149rpx;
			height: calc(100vh - 549rpx);
			background: #f1f1f1;

			.title {
				position: relative;
				padding: 15rpx 0 13rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #060606;
				background-color: #fff;

				&::after {
					content: ' ';
					position: absolute;
					left: 55rpx;
					right: 55rpx;
					bottom: 15rpx;
					border-bottom: 3px solid #ed602b;
				}
			}

			.menu-item {
				display: table;
				width: 100%;
				height: 121rpx;
				text-align: center;

				text {
					display: table-cell;
					vertical-align: middle;
					line-height: 34rpx;
					text-align: center;
					font-size: 24rpx;
					color: #060606;
				}

				&.on {
					position: relative;
					background-color: #fff;
				}
			}
		}

		.con-wrapper {
			width: calc(100% - 149rpx);
			height: calc(100vh - 549rpx);



			.product-item {
				display: flex;
				padding: 29rpx 24rpx 29rpx 36rpx;

				.img {
					width: 178rpx;
					height: 177rpx;
					border-radius: 10rpx;
					background-color: #f5f5f5;
				}

				.text {
					flex: 1;
					margin-left: 22rpx;
					padding-top: 20rpx;
					overflow: hidden;

					.name {
						line-height: 38rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #080808;
					}

					.specifications {
						margin-top: 5rpx;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #818181;
					}

					.bottom-wrapper {
						display: flex;
						justify-content: space-between;
						margin-top: 15rpx;

						.price {
							line-height: 56rpx;
							font-size: 34rpx;
							color: #ea5e2e;
						}
					}
				}
			}
		}
	}

	.bottom-menu-wrapper {
		position: relative;
		background-color: #fff;
	}
</style>
